<script setup lang="js">
    import {ref,watch,defineProps,defineAsyncComponent, inject} from "vue"

    // 异步引入,defineA...ents用于定义异步组件
    const Apps=defineAsyncComponent(()=> import("./App.vue"))

    let name=ref("黄紫红")

    const props = defineProps({
        pp:String
    })

    //收到开关，依赖注入，跟provide一块用的
    const opens=inject("opens")

    watch(()=>props.pp,(newVal,oldVal)=>{
  console.log('pp变化:', newVal, oldVal)
})

</script>

<template>
    <div>姓名:{{ name }}</div>
    <p>{{ pp}}</p>

    <div class="sonFat">
        <p>这里是子嵌套父</p>
        <Apps v-if="opens" />
    </div>
</template>

<style scoped>
.sonFat{
    width: 200px;
    height: 200px;
    background-color: rgb(138, 184, 138);
}
</style>